<template>
  <div class="wh100">
    <div class="left-upload">
      <UploadImg :image-url="imageUrl" :path="path" @upload="onUpload"></UploadImg>
    </div>
    <div class="search-tab my-sort">
      <span :class="{ active: currentId == 1 }" @click="selectTab(1)">抓拍检索</span>
      <span :class="{ active: currentId == 2 }" @click="selectTab(2)">底库检索</span>
    </div>

    <div class="search-time">
      <el-date-picker v-model="startTime" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" placeholder="开始日期" prefix-icon="el-icon-date" align="center" default-time="00:00:00">
      </el-date-picker>
    </div>

    <div class="search-time">
      <el-date-picker v-model="endTime" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" placeholder="结束日期" prefix-icon="el-icon-date" align="center" default-time="23:59:59">
      </el-date-picker>
    </div>

    <!-- <div class="search-time">
      <el-select v-model="zone" placeholder="区域" style="background-color: transparent" clearable>
        <el-option v-for="item in zoneList" :key="item.id" :label="item.zoneName" :value="item.id">
        </el-option>
      </el-select>
    </div> -->
    <div class="search-time" v-if="personnelIdentification">
      <el-select v-model="userType" placeholder="人员库" style="background-color: transparent" clearable>
        <el-option v-for="item in userTypeList" :key="item.id" :label="item.name" :value="item.id">
        </el-option>
      </el-select>
    </div>
    <div class="search-time" v-if="personnelIdentification">
      <el-input v-model="userName" placeholder="请输入用户姓名">

      </el-input>
    </div>
    <div class="search-btn justify-between">
      <span class="search-btn__reserve" @click="resetSearch()">重置</span>
      <span class="search-btn__search" @click="searchUser()">开始检索</span>
    </div>
  </div>
</template>

<script>
import UploadImg from "@/components/UploadImg.vue";
import moment from "moment";
export default {
  components: {
    UploadImg
  },
  props: {
    personnelIdentification:{
      type: Boolean,
      default: false
    },
    zoneList: {
      type: Array,
      default() {
        return [];
      }
    },
    userTypeList: {
      type: Array,
      default() {
        return [];
      }
    }
  },
  data() {
    return {
      userType: "",
      zone: "",
      currentId: 1,
      value: "",
      startTime: "",
      endTime: "",
      userName:"",
      imageUrl: null,
      path: null,
      options: [],
      eTime: moment().format("YYYY-MM-DD HH:mm:ss"),
      sTime: moment(moment().subtract(7, "days")._d).format(
        "YYYY-MM-DD HH:mm:ss"
      )
    };
  },
  mounted() {
    this.endTime = this.eTime;
    // 计算一周前的时间
    this.startTime = this.sTime;
    this.$emit("search", {
      startTime: this.startTime,
      endTime: this.endTime,
      imageUrl: this.imageUrl,
      path: this.path,
      zoneId: this.zone,
      userTypeId: this.userType,
      userName:this.userName
    });
  },
  methods: {
    onUpload(e) {
      if (e.path && e.imageUrl) {
        this.imageUrl = e.imageUrl;
        this.path = e.path;
      }
    },
    selectTab(index) {
      this.currentId = index;
    },
    //开始检索
    searchUser() {
      // if (
      //   new Date(this.endTime).getTime() <= new Date(this.startTime).getTime()
      // ) {
      //   return this.$message({
      //     message: "结束时间需大于开始时间",
      //     type: "error",
      //   });
      // }
      this.$emit("search", {
        startTime: this.startTime,
        endTime: this.endTime,
        imageUrl: this.imageUrl,
        path: this.path,
        zoneId: this.zone,
        userTypeId: this.userType,
        userName:this.userName
      });
    },

    resetSearch() {
      this.startTime = this.sTime;
      this.endTime = this.eTime;
      this.imageUrl = null;
      this.path = null;
      this.zone = "";
      this.userType = "";
      this.userName = "";
      this.$emit("search", {
        startTime: this.startTime,
        endTime: this.endTime,
        imageUrl: this.imageUrl,
        path: this.path,
        zoneId: this.zone,
        userTypeId: this.userType,
        userName:this.userName
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.left-upload {
  width: 316px;
  height: 316px;
  background-color: #363940;
  border: 1px solid #52535c;
  border-radius: 4px;
}

.search-tab {
  width: 100%;
  height: 36px;
  background-color: #212226;
  color: #949ba4;
  margin-top: 16px;
  border-radius: 8px;
  span {
    display: inline-block;
    width: 50%;
    height: 100%;
    text-align: center;
    line-height: 36px;
    cursor: pointer;
  }

  .active {
    background-color: #404249;
    color: #fff;
  }
}

.search-time {
  width: 316px;
  height: 36px;
  background-color: #212226;
  margin-top: 16px;
  border-radius: 4px;
  overflow: hidden;
  .el-date-editor.el-input,
  .el-date-editor.el-input__inner,
  .el-select {
    width: 100%;
  }
}

.search-btn {
  width: 100%;
  margin-top: 200px;
  cursor: pointer;
  span {
    width: 146px;
    height: 36px;
    display: inline-block;
    text-align: center;
    line-height: 36px;
    border-radius: 4px;
  }

  &__reserve {
    border: 1px solid #5cfbff;
    color: #5cfbff;
  }

  &__search {
    background-color: #5cfbff;
    color: #17181a;
  }
}
</style>
